<template>
	<div class="crumbsDiv">
		<div v-for="(crumb, index) in crumbs" :key="index">
			<span :class="crumb.choose ? 'crumbSelectDiv crumbDiv' : 'crumbDiv'"
        :style="'color: ' + (crumb.choose ? chooseColor : color)" @click="hrefTo(crumb)">{{crumb.label}}</span>
			<span v-if="index != (crumbs.length - 1)" style="padding: 0 5px" :style="'color: ' + color">/</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "breadcrumb",
		props: {
			crumbs: {
				type: Array,
				default: []
			},
			color: {
				type: String,
				default: '#999999'
			},
			chooseColor: {
				type: String,
				default: '#333333'
			}
		},
		methods: {
			hrefTo: function (crumb) {
				console.log('crumb', crumb)
				let ns = this
				if(crumb.choose) {
					ns.$router.go(0)
					return
				}
				if(crumb && crumb.parameter){
					if(crumb && crumb.parameter.id){
						this.$router.push({
							path: 'buildingDetail',
							query: { id: crumb.parameter.id,name: crumb.parameter.name,type: crumb.parameter.type },
						})
					}else {
						ns.$router.push({name: crumb.value})
					}
				}else {
					ns.$router.push({name: crumb.value})
				}
				
			}
		}
	}
</script>

<style scoped>
	.crumbsDiv {
		display: flex;
	}

	.crumbsDiv .crumbDiv {
		font-size: 15px;
	}

	.crumbsDiv .crumbDiv:hover {
		text-decoration: underline;
		cursor: pointer;
		transition: all 0.2s ease 0s;
	}

	.crumbsDiv .crumbSelectDiv {
		font-weight: bold;
	}
</style>
